<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--引入本地 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <!--    引入Layui组件-->
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1.1"></script>
    <script type="text/javascript" src="/admin/js-css/js/jQuery.print.js?v=1.1"></script>


    <style>
        table tr td
        {border:1px solid black;}

        body{
            font-weight: normal;
        }

        .fontclass{
            font-size: 10px;
        }

        .table_border tr td{
            border:none;
        }

        .div_fenguan{
            width: 100%;
            text-align: left;
            padding: 0 10px;
            height: 100%;
            line-height: 35px;
        }
    </style>

</head>
<body>

    <div id="app">

        <template>
            <div>
                <div>
                    <el-form
                            :inline="true"
                            size="mini"
                            class="demo-form-inline"
                    >

                        <el-form-item label="所属期" >
                            <el-col :span="11">
                                <el-date-picker
                                        type="month"
                                        placeholder="开始所属期"
                                        v-model="formData.start"
                                        style="width: 100%"
                                        value-format="yyyyMM"
                                ></el-date-picker>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-date-picker
                                        type="month"
                                        placeholder="结束所属期"
                                        v-model="formData.end"
                                        style="width: 100%"
                                        value-format="yyyyMM"
                                ></el-date-picker>
                            </el-col>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getData">查询</el-button>
                            <el-button type="primary" plain @click="toPrint">报表打印</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div id="printMe" style="padding: 2px 80px;">
                    <!-- table模块 -->
                    <table
                            border="1"
                            cellpadding="8"
                            style="border-collapse: collapse; width: 100%; font-size: 14px"
                    >
                        <caption>
                            <p style="font-size: 20px;font-weight: bold;"  >{{form.title}}</p>
                            <p style="text-align: center">
                                <table class="table_border" border="0" width="100%">
                                    <tr class="fontclass">
                                        <td style="width: 40%;">填报单位(盖章):</td>
                                        <td>{{form.rq}}</td>
                                        <td style="text-align: right;">单位:人、元</td>

                                    </tr>
                                </table>
                            </p>
                        </caption>
                        <tr class="fontclass" >
                            <td align="center" style="width: 81px;height: 45px;" >项目</td>
                            <td align="center"  >合计</td>
                            <td align="center" >局级</td>
                            <td align="center" >处级</td>
                            <td align="center" >科级</td>
                            <td align="center" >正高级</td>
                            <td align="center" >副高级</td>
                            <td align="center" >中级</td>
                            <td align="center" >高级技师</td>
                            <td align="center" >技师</td>
                            <td align="center" >其他人员</td>
                        </tr>
                        <tr class="fontclass" v-for="(item,index) in form.list" >
                            <td align="center" style="height: 43px;"  >{{item.name}}</td>
                            <td align="center"  >{{item.sum}}</td>
                            <td align="center" >{{item["104"]}}</td>
                            <td align="center" >{{item["103"]}}</td>
                            <td align="center" >{{item["102"]}}</td>
                            <td align="center" >{{item["204"]}}</td>
                            <td align="center" >{{item["203"]}}</td>
                            <td align="center" >{{item["202"]}}</td>
                            <td align="center" >{{item["303"]}}</td>
                            <td align="center" >{{item["302"]}}</td>
                            <td align="center" >{{item["qtry"]}}</td>
                        </tr>


                        <tr class="fontclass" >
                            <td align="center"  style="height: 150px;text-align: center;position:relative;"  >生活补贴管理发放部门</td>
                            <td align="center" colspan="5" style="height: 150px;text-align: left;position:relative;" >
                                <div>负责人（签字）：</div>
                                <div style="position:absolute;right:0;bottom:1px;"><span style="display: inline-block;width: 30px;">年</span><span style="display: inline-block;width: 30px;">月</span> <span style="display: inline-block;width: 25px;">日</span></div>
                            </td>
                            <td align="center" colspan="5" >
                                <div class="div_fenguan">
                                    <div></div>
                                    <div style="letter-spacing: 7px;">审 核：</div>
                                    <div style="letter-spacing: 7px;">制 表：</div>
                                </div>
                            </td>

                        </tr>


                        <tr class="fontclass" >
                            <td align="center"  style="height: 150px;text-align: center;position:relative;"  >单位意见</td>
                            <td align="center" >人力资源部</td>

                            <td align="center" colspan="4" style="height: 150px;text-align: left;position:relative;" >
                                <div style="line-height: 35px;">
                                    <div>负责人（签字）：</div>
                                    <div style="margin-top: 20px;">人事部门盖章：</div>
                                </div>

                                <div style="position:absolute;right:0;bottom:1px;"><span style="display: inline-block;width: 30px;">年</span><span style="display: inline-block;width: 30px;">月</span> <span style="display: inline-block;width: 25px;">日</span></div>
                            </td>
                            <td align="center"  >
                                财务部
                            </td>
                            <td align="center" colspan="4" style="height: 150px;text-align: left;position:relative;" >
                                <div style="line-height: 35px;">
                                    <div>负责人（签字）：</div>
                                    <div style="margin-top: 20px;">财务部门盖章：</div>
                                </div>
                                <div style="position:absolute;right:0;bottom:1px;"><span style="display: inline-block;width: 30px;">年</span><span style="display: inline-block;width: 30px;">月</span> <span style="display: inline-block;width: 25px;">日</span></div>
                            </td>

                        </tr>

                    </table>

                </div>
            </div>
        </template>
    </div>

    <script>

        var vm = new Vue({
           el:"#app",
           data:{
               form:{},
               formData:{start:"",end:""},
               parmsData:{},
           },
           created(){
               this.parmsData = getParams();
           },
            methods: {

                toPrint(){
                    $("#printMe").print();
                },
                //   获取表格数据
                async getData() {
                    load();
                    const res = await postWebCustom(getTableId("2516"),this.formData);
                    layer.closeAll();
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                    this.form = res.data;
                },

            },
        });
    </script>
</body>
</html>